<template>
  <div>
    <QueryTable
      :list="productList"
      :total="total"
      @execute="handleBtnClick"
      v-model="queryParams"
      :thead="th"
      :show-action="false"
      :show-section="false"
      :show-expand="true"
      :default-expand-all="true"
      pk="productId"
      :expandKeys="productList.map(item=>item.productId)"
    >
      <template #cover="{row}">
        <ImagePreview :src="row.cover" width="50px" height="50px"/>
      </template>

      <template #expand="{row}">
        <div class="pl-[70PX]">
          <div v-for="(item,index) in computeLink(row)" :key="index" class="flex items-center">
            采购链接：<div class="cursor-pointer text-[#3721FF] w-[400px] " style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap" v-copyText="item.url">
            <a :href="item.url" target="_blank">{{ item.url }}</a></div> <div class="ml-[15px]">备注：{{ item.remark }}</div>
          </div>
        </div>
      </template>
    </QueryTable>

  </div>
</template>
<script setup lang="ts">
import QueryTable from "@/components/TableData/index.vue";
import ImagePreview from "@/components/ImagePreview/index.vue";
import {PurchaseSuggestApi} from "@/api/purchase/advice";

const dataList = ref([])
const th = ref([
  {
    name: '封面',
    code: 'cover',
    type: 'numberRanger',
    search: true
  },
  {
    name: '商品名称',
    code: 'productName',
    type: 'numberRanger',
    search: true
  },
  {
    name: '商品id',
    code: 'productId',
    type: 'numberRanger',
    search: true
  },

  {
    name: '创建部门',
    code: 'createDept',
    type: 'numberRanger',
    search: true
  },

  {
    name: '创建者',
    code: 'createName',
    type: 'numberRanger',
    search: true
  },
])
const total = ref(0);

const purchaseLinks =ref([])

const props = defineProps({
  goodsIds: {
    type: String,
    required: false,
    default: () => ""
  },
  productList: {
    type: Array,
    required: false,
    default: () => []
  }
})

const computeLink = (row) => {
    return purchaseLinks.value.find(item=>item.productId == row.productId)?.productPurchaseDOList || []
}

const queryParams = ref({
  pageNo: 1, pageSize: 10
})

const queryPurchaseLink = async (productIds) => {
  let res = await PurchaseSuggestApi.getPurchaseLink(productIds);
  purchaseLinks.value =res;
  console.log(res)
}

watch(() => props.productList, () => {
  if (props.productList && props.productList.length > 0) {
    queryPurchaseLink(props.productList.map(item => item.productId)?.join(','))
  }
}, {
  deep: true,
  immediate: true
})

</script>
<style lang="scss" scoped>

</style>
